<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">

    <h2>{{finalPrice}} s</h2>
    <h2>{{finalPrice}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',  //先定义抓取id
      data: {
        books: [
          { id: 10, name: "jos", price: 20 },
          { id: 10, name: "jos", price: 20 },
          { id: 10, name: "jos", price: 20 },
          { id: 10, name: "jos", price: 20 }
        ]

      },
      // 使用计算属性只进行一次的函数运算，效率性能更高
      computed: {
        finalPrice: function () {
          let result = 0;
          // for (let p of this.books) {  es6遍历数组
          //   result += p.price;
          // }
         
          for (var i in this.books) {

            result += this.books[i].price;
          }
          return result;


        }
      },

    })
  </script>
</body>

</html>